<template>
  <vab-card class="box" v-loading="loading">
    <div class="flex_sb box_top width_100">
      <span class="homeTitile">客户订单量分析</span>
      <div class="time">
        <DateFiltering @selectDate="handleSelectDate" />
      </div>
    </div>
    <div class="flex_sb box_top width_100">
      <div class="flex">
        <span
          class="tabli"
          :class="{ active: tabIndex == 'amount' }"
          @click="handleTab('amount')"
        >
          金额
        </span>
        <span
          class="tabli"
          :class="{ active: tabIndex == 'count' }"
          @click="handleTab('count')"
        >
          商品数
        </span>
      </div>
      <div class="legend flex">
        <span class="dotLi"><span class="le"></span>成交量</span>
        <span class="dotLi"><span class="le green"></span>同期数据</span>
      </div>
    </div>
    <v-chart class="echart" :option="option" autoresize />
  </vab-card>
</template>

<script setup lang="ts">
import DateFiltering from './DateFiltering.vue'
import { CustomerOrdersEchart } from './tools'
import { StrSplit } from '~/src/utils/utils'
import VChart, { THEME_KEY } from 'vue-echarts'
import { getOrderLineChart } from '~/src/api/dms/home';

const loading = ref(false)

const tabIndex = ref('amount')
const selectDate = ref<any>({})

const option = ref<any>(null)

// 筛选时间
const handleSelectDate = (row: any) => {
  selectDate.value = row
  _getOrderLineChart()
}

const handleTab = (v: string) => {
  tabIndex.value = v
  _getOrderLineChart()
}

const _getOrderLineChart = async () => {
  const { time, dataType } = selectDate.value
  loading.value = true
  try {
    let query = {
      dataType: dataType || 'week',
      startTime: dataType == 'custom' ? StrSplit(time, ' / ', 0) : '',
      endTime: dataType == 'custom' ? StrSplit(time, ' / ', 1) : '',
      month: dataType == 'month' ? time : '',
    }

    let res = await getOrderLineChart({ ...query })
    const { lines, now, last } = res.data

    const obj: any = {
      lines,
      deal: now[tabIndex.value], //成交量
      synchronism: last[tabIndex.value], //同期数量
      tabIndex: tabIndex.value,
    }

    nextTick(() => {
      option.value = CustomerOrdersEchart(obj)
    })

    loading.value = false
  } catch (error) { }
}

/**
 * @实例
 */

onMounted(() => {
  _getOrderLineChart()
})


</script>

<style lang="scss" scoped>
.box {
  :deep() {
    .el-card__body {
      padding: 16px 24px 16px !important;
    }
  }
}

.box_top {
  margin-bottom: 16px;
}

.echart {
  width: 100%;
  height: 281px;
}

.tabli {
  display: inline-block;
  padding: 3px 12px;
  background: #f2f3f5;
  font-family: PingFangSC-Regular;
  font-weight: 300;
  font-size: 12px;
  color: #595959;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
  cursor: pointer;

  &.active {
    background: #1456f0 !important;
    color: #ffffff !important;
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
  }
}

.legend {
  height: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #1D2129;
  letter-spacing: 0;
  line-height: 20px;


  .dotLi {
    margin-right: 24px;
    display: flex;
    align-items: center;

    &:last-child {
      margin-right: 0px;
    }

    .le {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #1456F0;
      margin-right: 4px;
      margin-top: 1px;

      &.green {
        background: #26E3C0;
      }
    }
  }


}
</style>
